import React,{useEffect, useState } from 'react'
import {Outlet,useNavigate,useLocation} from 'react-router-dom'
import { UploadOutlined, UserOutlined, VideoCameraOutlined  ,MenuFoldOutlined,  MenuUnfoldOutlined, } from '@ant-design/icons';
import { Layout, Menu, theme,Button } from 'antd';
import menuList from '../router/index'
import $axios from '../utils/axios'
import {useSelector,useDispatch} from 'react-redux'
import {userAction} from '../store/index'

const { Header, Content, Footer, Sider, } = Layout;


export default function LayoutPage() {
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const [allMenuList, setMenuList] = useState([]);
  // 获取菜单列表
  const getMenuList=(data:any)=>{
    let res = data.find((item:any)=>{
      return item.children
    })
    return res.children
  }
  // 生成导航菜单
  const dealMenuFormat = (menus:any)=>{
    return menus.map((item:any)=>{
      if(!item.path ){
        return
      }else{
        return {
          key:item.path,
          label:item.title,
          children:item.children && dealMenuFormat(item.children)
        } 
      }

    })
  }
  useEffect(()=>{
    const myRouter = getMenuList(menuList)
    const menusEnd = dealMenuFormat(myRouter)
    setMenuList(menusEnd)
  },[])
  // 路由跳转
  const navigate = useNavigate()
  const pageJump=({ item, key, keyPath, domEvent } : any)=>{
    navigate(key)
  }
  // 仓库
  const dispatch = useDispatch()
    // 登录
    const goLogin=()=>{
      $axios({
        url:'/api/chcsLogin',
        method:'post',
        data:{
          account:'17760998888',
          pwd:'123456'
        }
      }).then((res:any)=>{
        console.log(res,'登录');
        // sessionStorage.setItem('logindata',res.data)
        dispatch(userAction.setUserInfo(res.data)) 
        getDoctorInfo(res.data.id)
      })
    }
    // 获取医生数据
    const getDoctorInfo=(id:any)=>{
      $axios({
        url:'/api/getDoctorByUserId',
        method:'post',
        data:{
          userId:id,
        }
      }).then((res:any)=>{
        console.log(res,'医生信息');
        // sessionStorage.setItem('logindata',res.data)
        dispatch(userAction.setDoctorInfo(res.data))
      })
    }

    const {
        token: { colorBgContainer },
      } = theme.useToken();
  return (
    <div style={ {height:'100%',width:'100%'}}>
      <Layout style={{height:'100%'}}>
        <Sider
          trigger={null} collapsible collapsed={collapsed} style={{height:'100%',background:'#fff'}}
        >
          <div style={{textAlign:'center',color:'#2993fa',margin:'20px 0',fontSize:'22px'}}>家医后台管理系统</div>
          <Menu
            theme="light"
            mode="inline"
            defaultSelectedKeys={[location.pathname]}
            items={allMenuList}
            onClick={pageJump}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />  
          <Button size={'small'} onClick={goLogin}>登录</Button>
          </Header>
          <Content style={{ margin: '24px 16px 0' ,background:'#f2f7fb'}}>
            <div style={{ padding: 48, minHeight: 360,height:'100%',width:'100%',overflow:'auto' }}>
              <Outlet></Outlet>
            </div>
          </Content>

      
        </Layout>
      </Layout>
    </div>
  )
}
